<template>
  <div class="designClass">
      <el-container class="outerContent">
          <el-aside class="outerAside">
              <libSlide></libSlide>
          </el-aside>
          <el-main>
              <div class="wrapper">
                  <el-scrollbar :native="true" height="100%">
                      <div class="pageBody">
                          <RouterView />
                      </div>
                  </el-scrollbar>
              </div>

          </el-main>
      </el-container>

  </div>
</template>

<script setup>
import { ref } from "vue" 
import libSlide from "./children/LibSlide"

</script>

<style lang="scss" scoped>

.outerContent {
    height: calc(100vh - 84px);
    .outerAside {
        width: 180px;
        height: 100%;
        padding: 30px 30px 0 0;
        border-right: 1px solid #eee;
    }
    .wrapper {
        background: #fff;
        overflow-x: auto;
        .pageBody {
            width: 100%;    
        }
    }

}


.el-aside {
    background: none;
    padding: 0;
}



</style>